<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Message from "../tools/Message.ts";
import ColorManager from "../manager/colorManager";

interface messageData {
    id: string,
    dom: HTMLDivElement,
    create: boolean,
}

const colorArr = ColorManager.get(0);

const colorBor = ref(colorArr.border);
// const colorBoxS = ref(colorArr.boxShadow);
// const colorBack = ref(colorArr.background);
// const colorText = ref(colorArr.text);

const messageRoot = ref<HTMLDivElement>();
let domArr: Array<messageData> = [];
let isRander = false;

onMounted(() => {
    domArr.forEach((u: messageData) => {
        if (!u.create) {
            messageRoot.value?.append(u.dom);
            u.create = false;
        }
    });
    isRander = true;
})

//#region loading
let loadingShow = () => {
    const div = document.createElement('div');
    const img = document.createElement('img');
    import('../../public/Images/emoji/ClanChat_Emoji_Tab_6.png').then(res => {
        img.src = res.default;
    });

    const span = document.createElement('span');
    span.innerText = "加载中";
    div.append(img);
    div.append(span);
    div.id = "loading";

    var data = {
        id: 'loading',
        dom: div,
        create: false,
    };
    domArr.push(data);
    if (isRander) {
        messageRoot.value?.append(div);
        data.create = true;
    }
}
let loadingHide = () => {
    const cur = domArr.find(u => u.id == 'loading');
    if (cur) {
        messageRoot.value!.removeChild(cur.dom);
        domArr = domArr.filter(item => item.id !== "loading");
    }
}
Message.add('loading', loadingShow, loadingHide);
//#endregion

</script>

<template>
    <div ref="messageRoot" class="message-root">
        <!-- <div>
            <img src="../assets/images/emoji/ClanChat_Emoji_Tab_6.png" />
            <span class="a">加载中
                <span class="dian" style="--t: 1s;">.</span>
                <span class="dian" style="--t: 2s;">.</span>
                <span class="dian" style="--t: 3s;">.</span>
            </span>
        </div> -->
    </div>
</template>

<style scoped>
.message-root {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}
</style>

<style>
.message-root>div {
    border: 1px solid v-bind(colorBor);
    background-color: white;
    display: flex;
    align-items: center;
    border-radius: 7px;
    margin: 10px;

    >span {
        padding-right: 50px;
        padding-left: 10px;
    }

    >img {
        height: 40px;
        padding: 5px 10px;
    }
}

.a {
    .dian {
        animation: ddian 1s infinite var(--t);
        opacity: 0;
    }
}

@keyframes ddian {
    0% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
</style>